<template>
    <div>
<!--        <div ref="mapOption" style="height:600px;width:600px;background: #eee" ></div>-->
<!--        <div id="myChartChina" :style="{width: '100%', height: '500px',}"></div>-->
        <div :style="{ position:'absolute',left: '400px', top: '150px',}">
            <el-button size="mini" @click="details()" type="primary">分布详情</el-button>
        </div>
        <div id="myChartChina" :style="{width: '100%', height: '600px',margin:'20px auto'}"></div>
        <el-dialog title="详情" v-model="vis" width="50%">
            <el-card>
                <el-table
                        :data="tableData"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="排名"
                            sortable>
                    </el-table-column>
                    <el-table-column
                            prop="company"
                            label="公司">
                    </el-table-column>
                    <el-table-column
                            prop="business"
                            label="主要业务和品牌">
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份">
                    </el-table-column>
                </el-table>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
    import "../../public/static/map/china.js";  // 引入中国地图组件
    import china from '../../public/static/map/china.json'
    import request from "../utils/request";
    const echarts = require('echarts');
    echarts.registerMap('china', china)

    export default {
        name: "ChinaMap",
        data () {
            return {
                search: '',
                form: {},
                dialogVisible: false,
                currentPage: 1,
                pageSize: 100,
                total: 0,
                tableData: [],
                detail: {},
                data0:  [],
                vis: false,
            }
        },
        // 钩子函数  不了解的话 建议看看 vue的生命周期
        mounted () {
            this.drawLine()
            this.load()
            console.log(this.tableData)
        },
        methods: {
            details() {
                this.vis=true
            },
            drawLine () {
                // 基于准备好的dom，初始化echarts实例
                var myChartContainer = document.getElementById('myChartChina')
                var resizeMyChartContainer = function () {
                    myChartContainer.style.width = (document.body.offsetWidth / 2) + 'px'// 页面一半的大小
                }
                resizeMyChartContainer()
                var myChartChina = echarts.init(myChartContainer)
                var optionMap = {};

                function randomData () {
                    return Math.round(Math.random() * 500)
                }
                // 绘制图表
                request.get("/top100InternetCompany",{ // 请求/top100InternetCompany接口
                    params: {
                        pageNum: 1,
                        pageSize: 100,
                        search: ''
                    }
                }).then(res=> {
                    // console.log(res);

                    let province=['北京','天津','上海','重庆','河北','河南','云南','辽宁','黑龙江','湖南','安徽','山东',
                        '新疆','江苏','浙江','江西','湖北','广西','甘肃','山西','内蒙古','陕西','吉林','福建','贵州','广东',
                        '青海', '西藏','四川','宁夏','海南','台湾','香港','澳门'];

                    for(var i=0;i<province.length;i++)
                    {
                        this.data0.push({name:province[i],value:0});
                    }
                    // console.log(this.data0);


                    for (var i=0;i<res.data.records.length;i++)
                    {
                        for(var j=0;j<this.data0.length;j++) {
                            if(this.data0[j]['name']===res.data.records[i]['name']) {
                                this.data0[j]['value']=res.data.records[i]['value'];
                            }
                        }
                    }

                    // console.log(this.data0);

                    optionMap = {
                        title: {
                            text: '互联网企业100强地域分布',
                            subtext: '数据来自网络',
                            x: 'center'
                        },
                        tooltip: {},
                        toolbox: {  // 显示保存图片的按钮
                            show: true,
                            orient: 'horizontal',
                            bottom: 10,
                            right: 20,
                            feature: {
                                // dataView: {readOnly: true},
                                // restore: {},
                                saveAsImage: {}
                            }
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: ['']
                        },
                        visualMap: {
                            min: 0,
                            max: 40,
                            left: '10%',
                            top: 'bottom',
                            text: ['高', '低'],
                            calculable: true,
                            // color: ['#0b50b9', '#c3e2f4'],
                            color: ['#DC143C','#D9EDF7']
                        },
                        selectedMode: 'single',
                        series: [
                            {
                                name: '',
                                type: 'map',
                                mapType: 'china',
                                itemStyle: {
                                    normal: {
                                        borderColor: 'rgba(0, 0, 0, 0.2)'
                                    },
                                    emphasis: {
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowBlur: 20,
                                        borderWidth: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                showLegendSymbol: true,
                                label: {
                                    normal: {
                                        show: true
                                    },
                                    emphasis: {
                                        show: true
                                    }
                                },
                                data: this.data0,
                            }
                        ]
                    };

                    optionMap && myChartChina.setOption(optionMap)

                });

                // optionMap && myChartChina.setOption(optionMap)
                window.onresize = function () {
                    resizeMyChartContainer()
                    myChartChina.resize()
                }
            },
            load() {
                request.get("/top100InternetCompany/all",{
                    params: {
                        pageNum: this.currentPage,
                        pageSize: this.pageSize,
                        search: this.search
                    }
                }).then(res=>{
                    console.log(res)
                    this.tableData=res.data.records
                    // this.total=res.data.total
                })
            },
        }
    }
</script>

<style scoped>

</style>

<!--中国地图的数据-->
<!--<script>-->
<!--    this.data0= [{ name: '北京', value: randomData() },-->
<!--        { name: '天津', value: randomData() },-->
<!--        { name: '上海', value: randomData() },-->
<!--        { name: '重庆', value: randomData() },-->
<!--        { name: '河北', value: randomData() },-->
<!--        { name: '河南', value: randomData() },-->
<!--        { name: '云南', value: randomData() },-->
<!--        { name: '辽宁', value: randomData() },-->
<!--        { name: '黑龙江', value: randomData() },-->
<!--        { name: '湖南', value: randomData() },-->
<!--        { name: '安徽', value: randomData() },-->
<!--        { name: '山东', value: randomData() },-->
<!--        { name: '新疆', value: randomData() },-->
<!--        { name: '江苏', value: randomData() },-->
<!--        { name: '浙江', value: randomData() },-->
<!--        { name: '江西', value: randomData() },-->
<!--        { name: '湖北', value: randomData() },-->
<!--        { name: '广西', value: randomData() },-->
<!--        { name: '甘肃', value: randomData() },-->
<!--        { name: '山西', value: randomData() },-->
<!--        { name: '内蒙古', value: randomData() },-->
<!--        { name: '陕西', value: randomData() },-->
<!--        { name: '吉林', value: randomData() },-->
<!--        { name: '福建', value: randomData() },-->
<!--        { name: '贵州', value: randomData() },-->
<!--        { name: '广东', value: randomData() },-->
<!--        { name: '青海', value: randomData() },-->
<!--        { name: '西藏', value: randomData() },-->
<!--        { name: '四川', value: randomData() },-->
<!--        { name: '宁夏', value: randomData() },-->
<!--        { name: '海南', value: randomData() },-->
<!--        { name: '台湾', value: randomData() },-->
<!--        { name: '香港', value: randomData() },-->
<!--        { name: '澳门', value: randomData() },];-->
<!--</script>-->


